import {Component, ComponentProps, VueComponent, Link, Hook, Mut, Computed} from "vue3-oop";
import {NButton, NCard, NCollapse, NDrawer, NDrawerContent, NForm, NScrollbar, NSpace, NTag, NTabs, NTabPane} from "naive-ui";
import { nicon } from "@/utils/IconUtil";
import styles from "./index.module.scss";
import LogicFlow from '@logicflow/core';
import { ConfigProcessPanel,ConfigUsualPanel } from './panels'

interface IProps {
  logicFlow: LogicFlow,
  drawerTo: string,
}
@Component()
export default class ConfigPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    logicFlow:{},
    drawerTo: {default:'drawerToId'},
  }

  constructor() {
    super()
    this.initListeners();
  }

  @Mut() private state = {
    showPanel: false,
    selectedId: this.props.logicFlow.props.process.id,
    selectedName: this.props.logicFlow.props.process.name,
    selectedType: 'PROCESS'
  } 

  private initListeners=()=>{
    const { logicFlow } = this.props;
    logicFlow.on('blank:click',this.handleBlankClick);
    logicFlow.on('element:click',this.handleElementClick);
    
  }

  private handleBlankClick=(event:any)=>{
    this.state.selectedId = this.props.logicFlow.props.process.id;
    this.state.selectedName = this.props.logicFlow.props.process.name;
    this.state.selectedType = 'PROCESS';
  }

  private handleElementClick=(event:any)=>{
    const {data} = event;
    this.state.selectedId = data.id;
    this.state.selectedName = typeof(data.text)==='object'?data.text.value:data.text;
    this.state.selectedType = data.type;
  }

  /** 切换打开关闭属性面板 */
  public toggleShowPanel=()=>{
    this.state.showPanel = !this.state.showPanel;
  }

  render(){
    const { logicFlow } = this.props;
    const { selectedId,selectedName,selectedType } = this.state;
    const configButtonLabel = `属性面板 [${selectedName&&selectedName.length>0?selectedName:selectedId}]`;
    const CmpProps = {logicFlow:logicFlow,elementId:selectedId,elementName:selectedName,elementType:selectedType};
    return(
      <>
        <NButton
          class={[styles.bpmn_config_button]}
          size={"small"}
          onClick={this.toggleShowPanel}
        >{configButtonLabel}</NButton>
        <NDrawer
          class={[styles.bpmn_config_drawer]}
          to={this.props.drawerTo}
          placement={'bottom'}
          resizable={true}
          trapFocus={false}
          showMask={false}
          show={this.state.showPanel}
          defaultHeight={300}
        >
          <NDrawerContent>
            <NCard>
              {{
                header:()=>(
                  <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
                    {{ avatar: nicon("IosSettings"), default: ()=>configButtonLabel }}
                  </NTag></NSpace>
                ),
                'header-extra':()=>(
                  <NSpace size={'small'}>
                    <NButton size={'small'} type={"primary"} onClick={this.toggleShowPanel}>关闭面板</NButton>
                  </NSpace>
                ),
                default:()=>(
                  <NTabs type="line" animated class={[styles.bpmn_config_tabs]}>
                    <NTabPane name={ConfigProcessPanel.tabKey} tab={ConfigProcessPanel.tabName}><NScrollbar><ConfigProcessPanel {...CmpProps} /></NScrollbar></NTabPane>
                    { this.state.selectedType!=='PROCESS' && <NTabPane name={ConfigUsualPanel.tabKey} tab={ConfigUsualPanel.tabName}><NScrollbar><ConfigUsualPanel {...CmpProps} /></NScrollbar></NTabPane>}
                  </NTabs>
                )
              }}
            </NCard>
          </NDrawerContent>
        </NDrawer>
      </>
    )
  }
}